<template>
    <div style="height:100%;width:100%;display:flex;justify-content:center;align-items:center;">
        <div id="echarts" style="width:50%;height:50%"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data:20,
        }
    },
    methods:{
        initEcharts(){
            let chartDom = document.getElementById('echarts');
            let mychart = this.$echarts.init(chartDom);
            var m2R2Data = [
                {
                    value: 335,
                    legendname: "a",
                    name: "a",
                    itemStyle: { color: "#8d7fec" },
                },
                {
                    value: 310,
                    legendname: "b",
                    name: "b",
                    itemStyle: { color: "#5085f2" },
                },
                {
                    value: 234,
                    legendname: "c",
                    name: "c",
                    itemStyle: { color: "#e75fc3" },
                },
            ];
            let value = 55.33;
            let img = '/rccc.png' 
            let option = {
                series: [
                    {
                        name: "法律",
                        type: "pie",
                        clockwise: true, //饼图的扇区是否是顺时针排布
                        avoidLabelOverlap: false,
                        backgroundColor:'red',
                        radius: ['30%', '60%'],
                        padding:0,
                        label: {
                            normal: {
                                show: true,
                                formatter: function(param){
                                    if(param.name=='a'){
                                        return '{a|法律}'
                                    }else if(param.name == 'b'){
                                        return '{b|土木工程}'
                                    }else{
                                        return '{c|法律}'
                                    }
                                },
                                position:'outside',
                                padding:-70,
                                rich:{
                                    a: {
                                        color: 'black',
                                        width:50,
                                        height:50,
                                        backgroundColor:{
                                            image:'/rccc.png'
                                        },
                                        borderRadius:100,
                                        align:'center'
                                    },
                                    b: {
                                        color: 'black',
                                        width:50,
                                        height:50,
                                        backgroundColor:'#f1f1b8',
                                        borderRadius:100,
                                        align:'center'
                                    },
                                    c: {
                                        color: 'black',
                                        width:50,
                                        height:50,
                                        backgroundColor:'#b8f1cc',
                                        borderRadius:100,
                                        align:'center'
                                    },
                                }
                            },
                        },
                        labelLine:{
                            normal:{
                                show:false
                            }
                        },
                        data: m2R2Data,
                    },
                ],
            };
            option && mychart.setOption(option);
        },
    },
    mounted(){
        this.initEcharts();
    }
}
</script>

<style scoped>
.leftbottomChart {
  width: 80%;
  height: 14vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>